<template>
  <div class="loginForm">
    <el-form
      :model="loginForm"
      status-icon
      :rules="loginFormRules"
      ref="loginRuleForm"
    >
      <el-form-item label="用户:" prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="请输入手机号/用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <span class="forgetPsw">忘记密码</span>
      <el-form-item class="login">
        <el-button type="primary" @click="submitForm">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  methods: {
    submitForm () {
      this.$refs.loginRuleForm.validate(async valide => {
        if (!valide) return
        this.$store.dispatch('user/login', this.loginForm).then(() => {
          console.log(this.$store.state.user.userInfo)
          this.$message.success('登陆成功')
          this.$router.push('/')
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.loginForm{
    width: 350px;
    margin: 0 atuo;
    position: relative;
    .el-input{
        width: 350px;
    }
    .el-button{
        width: 350px;
    }
    .forgetPsw{
        position: absolute;
        right: 0;
        bottom: 40px;
        color: lightblue;
        font-size: 12px;
        cursor: pointer;
    }
}
</style>
